<template>
  <el-table :data="userList" stripe style="width: 100%">
    <el-table-column prop="id" label="ID" width="50"/>
    <el-table-column prop="nick" label="昵称" width="150"/>
    <el-table-column prop="sex" label="性别" :formatter="sexFormatter" width="80"></el-table-column>
    <el-table-column prop="phone" label="手机" width="150"/>
    <el-table-column prop="email" label="邮箱" width="150"/>
    <el-table-column prop="address" label="住址" width="220" />
    <el-table-column prop="createTime" label="创建时间" :formatter="dateFormatter"/>
    <el-table-column prop="updateTime" label="更新时间" :formatter="dateFormatter"/>
    <el-table-column label="操作" width="180">
      <template #default="scope">
        <a href="javascript:void(0)" @click="download(scope.row.id)">下载</a> &nbsp;
        <a :href="'/edit/'+scope.row.id">编辑</a> &nbsp;
        <a href="javascript:void(0)" @click="delUser(scope.row.id)">删除</a>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {doDelete, doGet} from "../http/httpRequest.js";
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";

let userList = ref( [{}] );

onMounted(() => {
  getData();
})

function getData() {
  doGet("/api/users", {}).then( (response) => {
    // 处理成功情况
    console.log(response);
    userList.value = response.data.data; // response.data = R 对象
  }).catch( (error) => {
    // 处理错误情况
    console.log(error);
  });
}

//使用iframe下载文件
function download(id) {
  let iframe = document.createElement("iframe");
  iframe.src = axios.defaults.baseURL + "/api/download/" + id;
  iframe.style.display = "none";
  document.body.appendChild(iframe);
}

//删除
function delUser(id) {
  doDelete("/api/user/" + id, {}).then(resp => {
    if (resp.data.code === 200) {
      //删除成功，提示一下
      ElMessage({
        showClose: true,
        message: '删除成功',
        type: 'success',
      })
      window.location.reload();
    } else {
      //删除失败，提示一下
      ElMessage({
        showClose: true,
        message: '删除失败',
        type: 'error',
      })
    }
  })
}
// 性别显示格式化方法
function sexFormatter(row, column, cellValue) {
  return cellValue === 0 ? "男" : "女";
}

// 日期格式化方法
function dateFormatter(row, column, cellValue) {
  if (!cellValue) return '';
  return cellValue.split(' ')[0];
}
</script>